Highcharts ব্যবহারকারীদের জন্য চার্টের রিসাইজ এবং রেসপন্সিভ ডিজাইন তৈরি করার সুবিধা প্রদান করে, যাতে তারা বিভিন্ন স্ক্রীন সাইজ এবং ডিভাইসে সুন্দরভাবে চার্ট দেখতে পারেন। এটি মোবাইল, ট্যাবলেট এবং ডেস্কটপে বিভিন্ন ডিভাইসে অ্যাপ্লিকেশনের ব্যবহারকারীদের জন্য অত্যন্ত গুরুত্বপূর্ণ।

Highcharts এর রেসপন্সিভ ডিজাইন ফিচারটি স্বয়ংক্রিয়ভাবে চার্টের আকার এবং লেআউট অ্যাডজাস্ট করে, যখন ব্রাউজারের সাইজ পরিবর্তিত হয়। এর পাশাপাশি, ব্যবহারকারী যদি তার ডিভাইসের স্ক্রীন সাইজ পরিবর্তন করেন, তখনও চার্ট স্বয়ংক্রিয়ভাবে মানিয়ে যাবে।

1. রেসপন্সিভ ডিজাইন সক্রিয় করা

Highcharts চার্টে রেসপন্সিভ ডিজাইন সক্রিয় করতে chart.responsive অপশনটি ব্যবহার করা হয়। এই অপশনটি একাধিক সেটিংস সরবরাহ করে, যার মাধ্যমে আপনি নির্দিষ্ট স্ক্রীন সাইজ অনুযায়ী চার্টের কনফিগারেশন পরিবর্তন করতে পারেন।

উদাহরণ:

Highcharts.chart('container', {
  chart: {
    type: 'line',
    responsive: {
      rules: [{
        condition: {
          maxWidth: 500 // নির্দিষ্ট স্ক্রীন সাইজের জন্য
        },
        chartOptions: {
          chart: {
            width: 300 // স্ক্রীন সাইজ ছোট হলে চার্টের আকার কমিয়ে দিবে
          },
          title: {
            text: 'Small Screen'
          }
        }
      }]
    }
  },
  title: {
    text: 'Responsive Chart Example'
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
  },
  yAxis: {
    title: {
      text: 'Amount'
    }
  },
  series: [{
    name: '2024 Sales',
    data: [100, 200, 300, 400, 500]
  }]
});

এখানে, যখন স্ক্রীন সাইজ 500px এর নিচে চলে যাবে, তখন চার্টের আকার 300px সেট হয়ে যাবে এবং শিরোনাম পরিবর্তিত হবে।

2. লেজেন্ড কনফিগারেশন

রেসপন্সিভ ডিজাইন ব্যবহারের সময় লেজেন্ডের পজিশনও পরিবর্তন করতে পারেন যাতে এটি মোবাইল ডিভাইসে ভালোভাবে প্রদর্শিত হয়। উদাহরণস্বরূপ, আপনি লেজেন্ডটিকে মোবাইল ডিভাইসে চার্টের নিচে রাখতে পারেন।

উদাহরণ:

Highcharts.chart('container', {
  chart: {
    type: 'line'
  },
  title: {
    text: 'Responsive Chart with Legend'
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
  },
  yAxis: {
    title: {
      text: 'Sales Amount'
    }
  },
  legend: {
    layout: 'vertical', // মোবাইল ডিভাইসে লেজেন্ডটি ভেটিক্যাল থাকবে
    align: 'right',
    verticalAlign: 'top'
  },
  series: [{
    name: '2024 Sales',
    data: [150, 200, 250, 300, 350]
  }],
  responsive: {
    rules: [{
      condition: {
        maxWidth: 600
      },
      chartOptions: {
        legend: {
          layout: 'horizontal',
          align: 'center',
          verticalAlign: 'bottom'
        }
      }
    }]
  }
});

এখানে, যখন স্ক্রীন সাইজ 600px এর নিচে চলে যাবে, লেজেন্ডের পজিশন পরিবর্তিত হবে এবং এটি চার্টের নিচে এবং হরিজন্টাল অবস্থানে যাবে।

3. ডেটা লেবেল এবং টুলটিপ কনফিগারেশন

মোবাইল ডিভাইসে ডেটা লেবেল এবং টুলটিপের আকার এবং অবস্থান কাস্টমাইজ করা যেতে পারে। ছোট স্ক্রীনে টুলটিপের আকার এবং কন্টেন্ট আরো সংক্ষিপ্ত বা compact রাখা যেতে পারে।

উদাহরণ:

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Responsive Chart with Tooltips'
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
  },
  yAxis: {
    title: {
      text: 'Revenue'
    }
  },
  series: [{
    name: '2024',
    data: [300, 400, 500, 600, 700]
  }],
  tooltip: {
    pointFormat: '{series.name}: <b>{point.y}</b>',
    style: {
      fontSize: '14px'
    }
  },
  responsive: {
    rules: [{
      condition: {
        maxWidth: 500
      },
      chartOptions: {
        tooltip: {
          style: {
            fontSize: '12px' // মোবাইল স্ক্রীনে ছোট ফন্ট সাইজ
          }
        }
      }
    }]
  }
});

এখানে, মোবাইল স্ক্রীনে টুলটিপের ফন্ট সাইজ ছোট করা হয়েছে যাতে এটি আরও স্পষ্ট এবং উপযুক্ত হয়।

4. চার্ট রিসাইজ অপশন

Highcharts চার্ট রিসাইজের জন্য সাধারণভাবে ডিফল্টভাবে রেসপন্সিভ থাকে, অর্থাৎ স্ক্রীন সাইজ পরিবর্তিত হলে চার্টের আকার পরিবর্তন হয়ে যায়। তবে আপনি ম্যানুয়ালি চার্ট রিসাইজ করতে চাইলে chart.resize() মেথড ব্যবহার করতে পারেন।

উদাহরণ:

var chart = Highcharts.chart('container', {
  chart: {
    type: 'line'
  },
  title: {
    text: 'Chart Resize Example'
  },
  series: [{
    data: [1, 2, 3, 4, 5]
  }]
});

// রিসাইজ করার জন্য
chart.setSize(600, 400);  // 600px x 400px আকারে চার্টের সাইজ পরিবর্তন

এটি আপনার চার্টের আকারকে ম্যানুয়ালি কাস্টমাইজ করতে সহায়তা করবে।

সারাংশ

Highcharts এর রেসপন্সিভ ডিজাইন ফিচারটি আপনার চার্টকে বিভিন্ন স্ক্রীন সাইজে উপযুক্তভাবে প্রদর্শন করার জন্য অত্যন্ত গুরুত্বপূর্ণ। আপনি chart.responsive অপশন, legend কনফিগারেশন, tooltip এবং data labels কাস্টমাইজেশনের মাধ্যমে চার্টের উপস্থাপন এবং আচরণ পরিবর্তন করতে পারেন। Highcharts এর এই সুবিধাগুলি আপনাকে বিভিন্ন ডিভাইসের জন্য শক্তিশালী এবং ব্যবহারকারী-বান্ধব চার্ট তৈরি করতে সহায়ক।